<template>
    <div style="background: rgb(255, 255, 255); font-size: 14px; padding-bottom: 10px">
        <div class="withdraw-money-list">
            <div>
                <div class="tixianje">
                    <p class="p1" style="font-size: 20px;height: 60px;line-height: 50px;">当前用户余额：{{tixian.money}}</p>
                </div>
            </div>
            <!--充值金额-->
            <div>
                <div class="tixianje" style="border-bottom:none">
                    <p class="p1">充值金额</p>
                    <p class="p2"><input type="text" :placeholder="'输入充值金额'" value="" v-model="rechargemoney"></p>
                </div>
            </div>
        </div>

        <div class="buybtn" v-if="paystatus==1">
            <div class="btngroup">
                <div class="btn1" @click="pay(1)" v-if="paybutton.wxbutton==1">微信</div>
                <div class="btn2" @click="pay(2)" v-if="paybutton.zfbbutton==1">支付宝</div>
                <div class="lxp-box" v-if="paybutton.zfbbutton==1">
                    <span style="color: #ffffff;font-size: 12px">如果微信无法支付，请用支付宝</span>
                    <div class="lxp"></div>
                </div>
            </div>
            <div class="high-privileges">
                <a class="acc" @click="rechargelog()">充值记录</a>
            </div>
        </div>
        <div class="poparrow" v-if="alipayshow">
            <img src="../../assets/img/arrow.png"/>
            <div class="txt">
                1.点击右上角 " ... "<br>
                2.选择用浏览器打开<br>
                3.跳转至支付宝完成支付<br>
                4.付款后点击下方按钮刷新页面
            </div>
            <div class="finishbtn" @click="refresh()">已完成支付宝付款</div>
        </div>
    </div>
</template>




<script>
    var timer,interval;
    export default {
        name: "recharge",
        data(){
            return {
                tixian:{},
                paystatus:1,
                alipayshow:false,  //微信浏览器支付宝支付提醒遮罩
                paybutton:{
                    wxbutton:0,
                    zfbbutton:0,
                },   //支付按钮显示
                rechargemoney:""

            }
        },
        created(){

        },
        mounted(){
            var token= localStorage.getItem("token");
            var ua = navigator.userAgent.toLowerCase();     //获取判断用的对象
            var local = window.location.href;       // 获取页面url
            if(local.indexOf("forms=") != -1 && ua.match(/MicroMessenger/i) != "micromessenger"){
                const form=decodeURIComponent(local.match(/forms=(\S*)/)[1]);
                console.log(form)
                const div = document.createElement("div");
                div.id = "alipay";
                div.innerHTML = form;
                document.body.appendChild(div);
                var sign = document.getElementsByName("sign")[0].value.replace(/\s/g,"+");
                document.getElementsByName("sign")[0].value=sign;
                document.querySelector("#alipay").children[0].submit();
            }else{
                if(!token){
                    this.onloads()
                }else {
                    this.getUser();
                }
                this.getConfig();
            }
        },
        watch:{
            $route( to , from ){
                var that=this;
                console.log(that)
                //that.materialsid = to.params.id
                //console.log( to.params.id , from.params.id )
                // to , from 分别表示从哪跳转到哪，都是一个对象
                // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
                //that.getDetail();
            }
        },
        methods:{
            getConfig(){
                var that = this;
                that.request1.post1({
                    url: that.Url + "api/user.index/payconfig",
                    success: function (res) {
                        //console.log(res)
                        if (res.data.code == 1) {
                            that.paybutton.wxbutton = res.data.data.wxpaybutton;
                            that.paybutton.zfbbutton = res.data.data.zfbpaybutton;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },

            // 点击支付
            pay(num){
                var that = this;
                if(that.rechargemoney === '') return that.$toast('请输入充值金额');
                var regu = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if(!regu.test(that.rechargemoney)) return that.$toast('请输入正确的充值金额');
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                if(num==1){
                    var paymethod = 1;
                    if (ua.match(/MicroMessenger/i) == "micromessenger") {
                        //微信浏览器打开
                        paymethod=1;
                    }else {
                        //h5打开
                        paymethod=2;
                    }
                    //微信支付
                    that.request1.post1({
                        url: that.Url + "api/order/addRecharge",
                        params: { paymethod:paymethod, paytype:1, money:that.rechargemoney},
                        success: function (res) {
                            if (res.data.code == 1) {
                                if(res.data.data.paytype==3){
                                    that.$toast.success("支付成功");
                                    timer = setTimeout(function () {
                                        that.getUser();
                                    }, 2000)
                                }else {
                                    var ress = JSON.parse(res.data.data);
                                    if(paymethod == 1){
                                        WeixinJSBridge.invoke(
                                            'getBrandWCPayRequest', {
                                                "appId": ress.appId,     //公众号名称，由商户传入
                                                "timeStamp": ress.timeStamp,         //时间戳，自1970年以来的秒数
                                                "nonceStr": ress.nonceStr, //随机串
                                                "package": ress.package,
                                                "signType": ress.signType,         //微信签名方式：
                                                "paySign":ress.paySign //微信签名
                                            },
                                            function (res) {
                                                //console.log(res);
                                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                                    that.$toast.success("支付成功");
                                                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                                    that.$toast("支付取消");
                                                } else {
                                                    that.$toast("支付失败");
                                                }
                                                timer = setTimeout(function () {
                                                    that.getUser();
                                                }, 2000)
                                            }
                                        );
                                    }else {
                                        that.$axios.post(that.Url+'api/user.index/third',{}
                                        ).then(function(res){
                                            console.log(res);
                                            if(res.data.code==1){

                                            }
                                        }).catch(function (error) {
                                            console.log(error)
                                        });
                                    }
                                }
                            } else {
                                alert("支付失败")
                            }
                        },
                        fail: function (error) {
                            alert("支付失败")
                        }
                    })
                }else {
                    //支付宝支付
                    that.request1.post1({
                        url: that.Url + "api/order/addRecharge",
                        params: {  paymethod:2, paytype:2, money:that.rechargemoney},
                        success: function (res) {
                            if(res.data.code == 1 && res.data.data.paytype==3){
                                that.$toast.success("支付成功");
                                timer = setTimeout(function () {
                                    that.getUser();
                                }, 2000)
                                return false
                            }
                            if (res.status == 200) {
                                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                                    //微信浏览器打开
                                    that.alipayshow=true;
                                    const form = res.data;
                                    var local = window.location.href;
                                    location.href=local+'&forms='+encodeURI(form);
                                }else {
                                    //h5打开
                                    const form = res.data;
                                    const div = document.createElement("div");
                                    div.id = "alipay";
                                    div.innerHTML = form;
                                    document.body.appendChild(div);
                                    document.querySelector("#alipay").children[0].submit();
                                }
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
//                            alert("支付失败")
                            alert(error.data.msg)
                            timer = setTimeout(function () {
                                that.getUser();
                            }, 2000)
                        }
                    })
                }
            },
            rechargelog(){
                this.$router.push({ path:'/myzoe/rechargelog'})
            },
            getUser(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/index",
                    params: {  },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.user=res.data.data.user;
                            that.tixian=res.data.data.tixian;
                            that.loadfoot=true;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        if (error.data.code == 401){
//                            console.log("没有token")
//                             localStorage.removeItem("token");
//                             that.onloads()
                        }
                        alert(error.data.msg)
                    }
                })
            },

            onloads(){
                var that=this;
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    console.log("wx打开");
                    this.getCode();
                }else {
                    console.log("h5打开");
                    that.$router.push("/log/login")
                }
            },
            login(){
                var that=this;
                that.$axios.post(that.Url+'api/user.index/third',{code:that.code}
                ).then(function(res){
                    console.log(res);
                    if(res.data.code==1){
                        localStorage.setItem('token', res.data.data.userinfo.token);
                        that.judging();
                    }
                }).catch(function (error) {
                    console.log(error)
                });
            },
        }
    }
</script>

<style scoped>
    .seller-details .seller-details-title p.p2.xsck{
        font-size: 12px;
        color: #888;
    }
    .xsck span{
        margin-right: 4px;
        height: 20px;
        margin-top: 10px;
        line-height:20px;
        font-size: 12px;
        border-radius: 4px;
        padding: 0 6px;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: #f9883c;
    }
    .pop .popmain .usermsg img{
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }
    .codeusermsg .left, .codeusermsg .left img{
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }
    .poparrow{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        color: #fff;
    }
    .poparrow img{
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .poparrow .txt{
        position: absolute;
        right: 50px;
        top: 88px;
        font-size: 20px;
        line-height: 45px;
    }
    .poparrow .finishbtn{
        position: absolute;
        left: 50px;
        top:304px;
        width: calc(100% - 100px);
        background: #4483e4;
        height: 39px;
        text-align: center;
        line-height: 39px;
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
    }
    .seller-details .seller-details-title p {
        margin-top: 20px;
        display: block;
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        font-weight: 700;
    }
    .seller-details .seller-details-title p.p2 {
        margin-top: 3px;
        display: block;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        padding: 0 25px;
    }
    .seller-details .seller-details-seller img {
        display: block;
        width: 36px;
        height: 36px;
        border-radius: 40px;
        margin-left: 10px;
        margin-top: 7px;
    }
    .seller-details .seller-details-seller a {
        margin-right: 10px;
        height: 30px;
        margin-top: 10px;
        line-height: 30px;
        font-size: 12px;
        border-radius: 4px;
        padding: 0 10px;
        display: block;
        text-align: center;
        color: #fff;
    }
    .seller-details .seller-details-box img {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .buybtn{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: 76px;
        background: rgba(255,255,255,0.9);
        box-sizing: border-box;
        padding: 10px 20px 40px 20px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .tips_af .tips_af_box b {
        font-size: 13px;
        font-weight: 700;
        color: #000;
        display: block;
        line-height: 36px;
        padding-bottom: 2px;
    }
    .am-switch input[type=checkbox] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border: 0 none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .buybtn .btngroup{
        width: 100%;
        /*height: 76px;*/
        display: flex;
        justify-content: space-between;
    }
    .buybtn .btngroup .btn1,.btn2{
        width: 48%;
        height: 39px;
        text-align: center;
        line-height: 39px;
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
        flex: 1;
    }
    .buybtn .btngroup div:nth-child(2){
        margin-left: .2rem;
    }
    .buybtn .btn1{
        background: #27aa2a;
    }
    .buybtn .btn2{
        background: #4483e4;
        position: relative;
    }
    .lxp-box{
        position: absolute;
        width: 170px;
        padding: 5px 10px;
        background-color: #f9883c;
        border-radius: 10px;
        bottom: 5px;
        right: 50px;
    }
    .lxp {
        position: absolute;
        top: -5px;
        right: 30px;
        border-style: solid;
        border-width: 0 0 15px 15px;
        transform: rotate(225deg);
        border-color: transparent transparent #f9883c transparent;
        width: 0px;
        height: 0px;
    }

    .buybtn .hascount span{
        text-decoration: line-through;
    }
    .seller-details .seller-details-box .content .content-watermark p {
        font-weight: 700;
        display: block;
        float: left;
        font-size: 13px;
        margin: 18px 7px;
        text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 1px #000;
        color: #fff;
        opacity: .35;
        transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand",M11=0.7660444431189777,M12=-0.6427876096865394,M21=0.6427876096865398,M22=0.7660444431189779);
    }
    .withdraw-money-list .tixianfangshi .p1 {
        font-size: 13px;
        font-weight: 500;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
    }
    .withdraw-money-list .tixianfangshi .p2 {
        display: -webkit-box;
    }
    .withdraw-money-list .tixianfangshi .p2 a {
        display: block;
        position: relative;
        -webkit-box-flex: 1;
        height: 44px;
        border: 1px solid #e4e4e4;
        text-align: center;
        border-radius: 4px;
        color: #999;
        margin-top: 5px;
    }
    .withdraw-money-list .tixianfangshi .p2 a span {
        position: absolute;
        left: 0;
        top: 0;
        width: 23px;
        height: 18px;
        float: left;
        display: inline-block;
    }
    .withdraw-money-list .tixianfangshi .p2 a.active span {
        width: 23px;
        height: 18px;
        background: url() no-repeat 0;
        background-size: 23px;
    }
    .withdraw-money-list .tixianfangshi .p2 a img {
        display: inline-block;
        max-width: 88%;
        max-height: calc(90% - 5px);
        vertical-align: inherit;
    }
    @media screen and (min-width: 200px){
        .withdraw-money-list .tixianfangshi .p2 a img {
            margin-top: 7px;
        }
    }
    @media screen and (min-width: 320px){
        .withdraw-money-list .tixianfangshi .p2 a img {
            margin-top: 10px;
        }
    }
    @media screen and (min-width: 360px){
        .withdraw-money-list .tixianfangshi .p2 a img {
            margin-top: 5px;
        }
    }
    button, input, optgroup, select, textarea {
        font-family: sans-serif;
        font-size: 100%;
        line-height: 1.15;
        margin: 0;
        font-size: 14px;
    }
    .withdraw-money-list .tixianje {
        padding: 10px 20px 0;
        border-bottom: 1px solid #efeff4;
    }
    .withdraw-money-list .tixianje p {
        display: block;
    }
    .withdraw-money-list .tixianje .p1 {
        font-size: 13px;
        font-weight: 500;
        height: 30px;
        line-height: 30px;
    }
    .withdraw-money-list .tixianje .p2 {
        display: -webkit-box;
    }
    .withdraw-money-list .tixianje .p2 input {
        color: #fc5d4d;
        height: 60px;
        line-height: 60px;
        font-size: 26px;
        -webkit-box-flex: 1;
        display: block;
        padding-left: 16px;
        background: url() no-repeat left 31px;
        background-size: 9px 10px;
    }
    .withdraw-money-list .tixianje .p2 a {
        display: block;
        width: 60px;
        height: 35px;
        border: .5px solid #e4e4e4;
        text-align: center;
        line-height: 35px;
        border-radius: 4px;
        color: #999;
        margin-top: 13px;
    }
    .withdraw-money-list .tixianfeilv div:first-child{
        color: #d8685c;
    }
    .withdraw-money-list .list p {
        height: 55px;
        width: 80px;
        text-align: left;
        line-height: 55px;
        padding-left: 20px;
        font-size: 13px;
        font-weight: 500;
    }
    .withdraw-money-list .list span {
        -webkit-box-flex: 1;
        display: block;
        padding-right: 20px;
    }
    .withdraw-money-list .list input {
        -webkit-box-flex: 1;
        display: block;
        left: 20px;
        height: 55px;
    }
    .withdraw-money-list .list span input {
        width: 100%;
        display: block;
        height: 55px;
        text-align: right;
        background: #fff;
    }
    .withdraw-money-list .list a {
        display: block;
        text-align: center;
        width: 92px;
        border-radius: 4px;
        line-height: 32px;
        height: 32px;
        margin: 0 10px;
        color: #999;
        font-size: 12px;
        border: .5px solid #e4e4e4;
        margin-top: 10px;
    }
    .high-privileges a.acc {
        display: block;
        width: 90%;
        margin: 30px 5%;
        background: #fc5d4d;
        color: #fff;
        font-size: 14px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        box-shadow: 0 5px 10px #f6a59f;
    }
</style>
